<template>
  <div class="app-container">
    <el-button @click="onAdd()">新增</el-button>

    <!-- 列表数据 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      max-height="600"
    >
      <el-table-column prop="billingDate" label="开单日期" width="150" />
      <el-table-column prop="proposer" label="提出者" width="200" />
      <el-table-column prop="number" label="编号" width="120" />
      <el-table-column prop="occurrenceUnit" label="发生单位" width="120" />
      <el-table-column prop="state" label="状态" width="200" />
      <el-table-column
        prop="disposalInstructions"
        label="处置说明"
        width="200"
      />
      <el-table-column prop="proposer" label="提出者" width="120" />
      <el-table-column
        prop="disposalInstructions"
        label="处置说明"
        width="300"
      />
      <el-table-column prop="productName" label="品名" width="120" />
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            circle
            @click="onRowEdit(scope.row)"
          />
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="small"
            @click="onRowDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      :current-page="pagination.page"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagination.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      :visible.sync="dialogFormVisible"
      width="90%"
      @closed="close"
    >
      <Edit
        ref="refsFromData"
        :formdate="dataFromold"
        @FromData="newFromData"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Edit from './edit'
export default {
  components: { Edit },
  data() {
    return {
      // 分页
      pagination: {
        // 每页条数
        limit: 10,
        // 当前页数
        page: 1,
        // 总条数
        count: 0
      },
      // 搜索栏表单数据
      formData: {
        occurrenceUnit: '',
        unitHead: '',
        proposer: '',
        nonconformingItems: '',
        state: ''
      },
      // 列表数据
      tableData: [
        {
          billingDate: '2016-05-03',
          proposer: '王小虎',
          number: '模治具、设备',
          id: 1,
          occurrenceUnit: '上海',
          state: '普陀区',
          disposalInstructions: '上海市普陀区金沙江路 1518 弄',
          productName: 200333
        },
        {
          billingDate: '2016-05-04',
          proposer: '王类乎',
          number: '模治',
          id: 2,
          occurrenceUnit: '北京',
          state: '朝阳区',
          disposalInstructions: '北京市照样区金沙江路 1518 弄',
          productName: 20007763
        }
      ],
      // 判断从哪点击
      fromed: '',
      // 弹窗的显示与隐藏
      dialogFormVisible: false,
      // 要传给子组件的表单数据
      dataFromold: {},
      // 传过来的数据
      datafrom: {}
    }
  },
  created() {},
  methods: {
    // 查询
    query() {},
    // 新增
    onAdd() {
      this.fromed = 'b'
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 编辑
    onRowEdit(val) {
      console.log(val)
      this.fromed = 'a'
      // 把 该行 的数据发送给 需要传给子组件的数据
      this.dataFromold = val
      console.log(this.dataFromold)
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 删除
    onRowDelete(val) {
      console.log(val)
    },
    // 分页的点击事件
    handleSizeChange() {},
    handleCurrentChange() {},
    // 弹窗的点击事件
    close() {
      // 弹窗上面的❌号点击 调用子组件的清除表单方法
      this.$refs.refsFromData.RemoveFromDated()
      this.dataFromold = {}
    },
    newFromData(val) {
      // 把子组件传来的数据保存到父组件里
      this.datafrom = val
      // 此时 子组件传来的值 已经赋值给 datafrom 了， 点击确定的时候可以取这个值发送请求
      console.log(this.datafrom)
    },
    determine() {
      // 调用子组件的子传值给父组件的方法
      this.$refs.refsFromData.refsfromdated()

      if (this.fromed === 'a') {
        console.log('从表格内点击的打开弹窗')
      } else if (this.fromed === 'b') {
        console.log('从新增点击的打开弹窗')
      }
      this.$refs.refsFromData.RemoveFromDated()
      this.dialogFormVisible = !this.dialogFormVisible
    }
  }
}
</script>
